
<!--
 .vue文件是vue项目中的组件文件 一个.vue 文件就是一个组件
.vue组件的内容分为三大部分：template script style
template 是组件的模板
 script需要导出的组件内容
 style中是组件css样式
 -->

<template>
  <div id="app">
    <div class="tab-bar clear-fix">
      <div class="tab-item">
        <router-link to="/">首页</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/friend">qq分组</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/star">动态评星</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/Slider">音量设置</router-link>
      </div>
        <div class="tab-item">
        <router-link to="/Setting">页面设置</router-link>
      </div>
    </div>
    <keep-alive>
    <router-view></router-view>
     </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style scoped>

.tab-bar{
	position: fixed;
	bottom: 0;
	width: 100%;
}
.tab-item{
	height: 57px;
	width:25%;
	border:solid 1px black;
	text-align:center;
	line-height:57px;
	float:left;
}

</style>